<template>
  <div>
    <webHead />
    <div class="vip-warp">
      <h2>VIP购票</h2>
      <div class="vip-warp2">
        <div class="vip-left">
          <div style="margin-bottom: 10px">个人信息</div>
          <el-form ref="form" :model="form" size="mini" label-width="80px">
            <el-form-item label="消费">
              <el-input v-model="form.xf" :controls="false" disabled />
            </el-form-item>
            <el-form-item label="余额">
              <el-input v-model="form.ye" :controls="false" disabled />
            </el-form-item>
            <el-form-item label="积分">
              <el-input v-model="form.jf" :controls="false" disabled />
            </el-form-item>
          </el-form>
          <div style="margin-bottom: 10px">电影信息</div>
          <el-form ref="form" :model="form2" size="mini" label-width="80px">
            <el-form-item label="电影名称">
              <el-select v-model="form2.mname">
                <el-option label="流浪地球2" value="流浪地球2" />
                <el-option label="满江红" value="满江红" />
              </el-select>
            </el-form-item>
            <el-form-item label="放映日期">
              <el-select v-model="form2.mdate">
                <el-option label="2023-4-20" value="2023-4-20" />
                <el-option label="2023-4-19" value="2023-4-19" />
              </el-select>
            </el-form-item>
            <el-form-item label="入场时间">
              <el-select v-model="form2.mtime">
                <el-option label="20:30" value="20:30" />
                <el-option label="22:30" value="22:30" />
              </el-select>
            </el-form-item>
            <el-form-item label="放映厅">
              <el-select v-model="form2.mfyt">
                <el-option label="1号厅" value="1号厅" />
                <el-option label="2号厅" value="2号厅" />
              </el-select>
            </el-form-item>
            <el-form-item label="影票价格">
              <el-input v-model="form2.price" disabled />
            </el-form-item>
            <el-form-item label="影票折扣">
              <el-input v-model="form2.price2" disabled />
            </el-form-item>
            <el-form-item label="影票数量">
              <el-input v-model="form2.price3" disabled />
            </el-form-item>
            <el-form-item label="应扣金额">
              <el-input v-model="form2.price4" disabled />
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button
              type="primary"
              size="mini"
              @click="buy"
            >确认购买</el-button>
          </div>
        </div>
        <div class="vip-right">
          <div class="hall">
            <div class="seat-example">
              <div class="selectable-example example">
                <span>可选座位</span>
              </div>
              <div class="sold-example example">
                <span>已售座位</span>
              </div>
              <div class="selected-example example">
                <span>已选座位</span>
              </div>
              <div class="couple-example example">
                <span>情侣座位</span>
              </div>
            </div>

            <div
              class="seats-block"
              data-cols="16"
              data-section-id="0"
              data-section-name="默认分区"
              data-seq-no="202304170686456"
            >
              <div class="row-id-container">
                <span class="row-id">1</span>
                <span class="row-id">2</span>
                <span class="row-id">3</span>
                <span class="row-id">4</span>
                <span class="row-id">5</span>
                <span class="row-id">6</span>
                <span class="row-id">7</span>
                <span class="row-id">8</span>
                <span class="row-id">9</span>
              </div>

              <div class="seats-container">
                <div class="screen-container">
                  <div class="screen">银幕中央</div>
                  <div class="c-screen-line" />
                </div>

                <div class="seats-wrapper">
                  <div class="row">
                    <span
                      class="seat selectable"
                      data-column-id="14"
                      data-row-id="1"
                      data-no="000000036956-1-1"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="13"
                      data-row-id="1"
                      data-no="000000036956-1-2"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="12"
                      data-row-id="1"
                      data-no="000000036956-1-3"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="11"
                      data-row-id="1"
                      data-no="000000036956-1-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="10"
                      data-row-id="1"
                      data-no="000000036956-1-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="1"
                      data-no="000000036956-1-6"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="1"
                      data-no="000000036956-1-7"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="7"
                      data-row-id="1"
                      data-no="000000036956-1-8"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="6"
                      data-row-id="1"
                      data-no="000000036956-1-9"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="5"
                      data-row-id="1"
                      data-no="00000036956-1-10"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="4"
                      data-row-id="1"
                      data-no="00000036956-1-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="3"
                      data-row-id="1"
                      data-no="00000036956-1-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="1"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="1"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="1"
                      data-no="00000036956-1-15"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="1"
                      data-no="00000036956-1-16"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat selectable"
                      data-column-id="14"
                      data-row-id="2"
                      data-no="000000036956-2-1"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="13"
                      data-row-id="2"
                      data-no="000000036956-2-2"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="12"
                      data-row-id="2"
                      data-no="000000036956-2-3"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="11"
                      data-row-id="2"
                      data-no="000000036956-2-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="10"
                      data-row-id="2"
                      data-no="000000036956-2-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="2"
                      data-no="000000036956-2-6"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="2"
                      data-no="000000036956-2-7"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="7"
                      data-row-id="2"
                      data-no="000000036956-2-8"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="6"
                      data-row-id="2"
                      data-no="000000036956-2-9"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="5"
                      data-row-id="2"
                      data-no="00000036956-2-10"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="4"
                      data-row-id="2"
                      data-no="00000036956-2-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="3"
                      data-row-id="2"
                      data-no="00000036956-2-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="2"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="2"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="2"
                      data-no="00000036956-2-15"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="2"
                      data-no="00000036956-2-16"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat selectable"
                      data-column-id="14"
                      data-row-id="3"
                      data-no="000000036956-3-1"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="13"
                      data-row-id="3"
                      data-no="000000036956-3-2"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="12"
                      data-row-id="3"
                      data-no="000000036956-3-3"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="11"
                      data-row-id="3"
                      data-no="000000036956-3-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="10"
                      data-row-id="3"
                      data-no="000000036956-3-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="3"
                      data-no="000000036956-3-6"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="3"
                      data-no="000000036956-3-7"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="7"
                      data-row-id="3"
                      data-no="000000036956-3-8"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="6"
                      data-row-id="3"
                      data-no="000000036956-3-9"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="5"
                      data-row-id="3"
                      data-no="00000036956-3-10"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="4"
                      data-row-id="3"
                      data-no="00000036956-3-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="3"
                      data-row-id="3"
                      data-no="00000036956-3-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="3"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="3"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="3"
                      data-no="00000036956-3-15"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="3"
                      data-no="00000036956-3-16"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat selectable"
                      data-column-id="14"
                      data-row-id="4"
                      data-no="000000036956-4-1"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="13"
                      data-row-id="4"
                      data-no="000000036956-4-2"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="12"
                      data-row-id="4"
                      data-no="000000036956-4-3"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="11"
                      data-row-id="4"
                      data-no="000000036956-4-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="10"
                      data-row-id="4"
                      data-no="000000036956-4-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="4"
                      data-no="000000036956-4-6"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="4"
                      data-no="000000036956-4-7"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="7"
                      data-row-id="4"
                      data-no="000000036956-4-8"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="6"
                      data-row-id="4"
                      data-no="000000036956-4-9"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="5"
                      data-row-id="4"
                      data-no="00000036956-4-10"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="4"
                      data-row-id="4"
                      data-no="00000036956-4-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="3"
                      data-row-id="4"
                      data-no="00000036956-4-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="4"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="4"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="4"
                      data-no="00000036956-4-15"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="4"
                      data-no="00000036956-4-16"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="5"
                      data-no="000000036956-5-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="5"
                      data-no="000000036956-5-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="7"
                      data-row-id="5"
                      data-no="000000036956-5-6"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="6"
                      data-row-id="5"
                      data-no="000000036956-5-7"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="5"
                      data-row-id="5"
                      data-no="000000036956-5-8"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="4"
                      data-row-id="5"
                      data-no="000000036956-5-9"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="3"
                      data-row-id="5"
                      data-no="00000036956-5-10"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="5"
                      data-no="00000036956-5-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="5"
                      data-no="00000036956-5-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="5"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="6"
                      data-no="000000036956-6-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="6"
                      data-no="000000036956-6-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="7"
                      data-row-id="6"
                      data-no="000000036956-6-6"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="6"
                      data-row-id="6"
                      data-no="000000036956-6-7"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="5"
                      data-row-id="6"
                      data-no="000000036956-6-8"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="4"
                      data-row-id="6"
                      data-no="000000036956-6-9"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="3"
                      data-row-id="6"
                      data-no="00000036956-6-10"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="6"
                      data-no="00000036956-6-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="6"
                      data-no="00000036956-6-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="6"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="7"
                      data-no="000000036956-7-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="7"
                      data-no="000000036956-7-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="7"
                      data-row-id="7"
                      data-no="000000036956-7-6"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="6"
                      data-row-id="7"
                      data-no="000000036956-7-7"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="5"
                      data-row-id="7"
                      data-no="000000036956-7-8"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="4"
                      data-row-id="7"
                      data-no="000000036956-7-9"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="3"
                      data-row-id="7"
                      data-no="00000036956-7-10"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="7"
                      data-no="00000036956-7-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="7"
                      data-no="00000036956-7-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="7"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="9"
                      data-row-id="8"
                      data-no="000000036956-8-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="8"
                      data-row-id="8"
                      data-no="000000036956-8-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="7"
                      data-row-id="8"
                      data-no="000000036956-8-6"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="6"
                      data-row-id="8"
                      data-no="000000036956-8-7"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="5"
                      data-row-id="8"
                      data-no="000000036956-8-8"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="4"
                      data-row-id="8"
                      data-no="000000036956-8-9"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="3"
                      data-row-id="8"
                      data-no="00000036956-8-10"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="8"
                      data-no="00000036956-8-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="8"
                      data-no="00000036956-8-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat empty"
                      data-column-id=""
                      data-row-id="8"
                      data-no=""
                      data-st="E"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                  <div class="row">
                    <span
                      class="seat selectable"
                      data-column-id="16"
                      data-row-id="9"
                      data-no="000000036956-9-1"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="15"
                      data-row-id="9"
                      data-no="000000036956-9-2"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="14"
                      data-row-id="9"
                      data-no="000000036956-9-3"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="13"
                      data-row-id="9"
                      data-no="000000036956-9-4"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="12"
                      data-row-id="9"
                      data-no="000000036956-9-5"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="11"
                      data-row-id="9"
                      data-no="000000036956-9-6"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="10"
                      data-row-id="9"
                      data-no="000000036956-9-7"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="9"
                      data-row-id="9"
                      data-no="000000036956-9-8"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="8"
                      data-row-id="9"
                      data-no="000000036956-9-9"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat sold"
                      data-column-id="7"
                      data-row-id="9"
                      data-no="00000036956-9-10"
                      data-st="LK"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="6"
                      data-row-id="9"
                      data-no="00000036956-9-11"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="5"
                      data-row-id="9"
                      data-no="00000036956-9-12"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="4"
                      data-row-id="9"
                      data-no="00000036956-9-13"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="3"
                      data-row-id="9"
                      data-no="00000036956-9-14"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="2"
                      data-row-id="9"
                      data-no="00000036956-9-15"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                    <span
                      class="seat selectable"
                      data-column-id="1"
                      data-row-id="9"
                      data-no="00000036956-9-16"
                      data-st="N"
                      data-act="seat-click"
                      data-bid="b_s7eiiijf"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import webHead from '../web/components/head.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'WebPersonal',
  components: {
    webHead
  },
  data() {
    return {
      form: {
        xf: '2345.00',
        ye: '520.00',
        jf: '2345'
      },
      form2: {
        mname: '',
        mdate: '',
        mtime: '',
        mfyt: '',
        price: '60',
        price2: '8',
        price3: 0,
        price4: 0
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    const allSeat = document.querySelectorAll('.selectable')
    const me = this
    for (let i = 0; i < allSeat.length; i++) {
      const item = allSeat[i]
      item.onclick = () => {
        if (item.classList.contains('selected')) {
          item.classList.remove('selected')
          me.form2.price3 -= 1
          me.form2.price4 =
            me.form2.price * (me.form2.price2 / 10) * me.form2.price3
        } else {
          item.classList.add('selected')
          me.form2.price3 += 1
          me.form2.price4 =
            me.form2.price * (me.form2.price2 / 10) * me.form2.price3
        }
      }
    }
  },
  created() {},
  methods: {
    buy() {
      if (this.form2.price3 < 1) {
        return this.$message.error('请选择座位')
      }
      if (this.form2.price4 > this.form.ye) {
        return this.$message.error('余额不足')
      }
      this.$message.success('购买成功')
      const allSeat = document.querySelectorAll('.selected')
      for (let i = 0; i < allSeat.length; i++) {
        const item = allSeat[i]
        item.classList.remove('selected')
        item.classList.add('sold')
      }
      const xf = this.form.ye * 1 - this.form2.price4
      const add = this.form.ye * 1 + this.form2.price4
      this.form.xf = add.toFixed(2)
      this.form.ye = xf.toFixed(2)
      this.form.jf = add
      this.form2.price3 = 0
      this.form2.price4 = 0
    }
  }
}
</script>

    <style lang="scss" scoped>
.vip-warp {
  width: 1200px;
  margin: auto;
  padding-top: 140px;
  h2 {
    margin-bottom: 20px;
  }
}
.vip-warp2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .vip-left {
    width: 300px;
  }
  .vip-right {
    flex: 1;
    padding-left: 50px;
    .hall {
      width: 820px;
      display: inline-block;
      vertical-align: top;
    }

    .hall .seat-example {
      margin: 30px 0 30px 118px;
    }

    .hall .seat-example .example {
      display: inline-block;
      font-size: 16px;
      color: #666;
      height: 26px;
      line-height: 26px;
      padding-left: 38px;
      background-repeat: no-repeat;
      margin-right: 50px;
    }

    .hall .seat-example .selectable-example {
      background-image: url();
    }

    .hall .seat-example .sold-example {
      background-image: url();
    }

    .hall .seat-example .selected-example {
      background-image: url();
    }

    .hall .seat-example .couple-example {
      padding-left: 77px;
      background-image: url();
    }

    .seats-block {
      font-size: 0;
      overflow: hidden;
      margin-left: 20px;
      white-space: nowrap;
    }

    .seats-block .row-id-container {
      width: 20px;
      float: left;
      margin-top: 112px;
      white-space: normal;
    }

    .seats-block .row {
      white-space: nowrap;
      margin-bottom: 10px;
      text-align: center;
    }

    .seats-block .empty-row {
      height: 20px;
    }

    .seats-block .empty-row-id {
      display: inline-block;
      height: 20px;
      width: 20px;
    }

    .seats-block .row-id {
      font-size: 16px;
      color: #999;
      margin-right: 40px;
      margin-bottom: 10px;
      display: inline-block;
      width: 20px;
      height: 26px;
      line-height: 29px;
      text-align: center;
    }

    .seats-block .seats-container {
      margin-left: 50px;
      overflow: auto;
      position: relative;
      padding-top: 112px;
    }

    .seats-block .seats-wrapper {
      display: inline-block;
      min-width: 550px;
    }

    .seats-block .screen-container {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: -1;
    }

    .seats-block .screen-container .screen {
      width: 550px;
      padding-top: 50px;
      text-align: center;
      font-size: 16px;
      color: #666;
      background: url()
        no-repeat;
      background-position-x: center;
      position: relative;
      margin-bottom: 40px;
    }

    .seats-block .screen-container .c-screen-line {
      width: 0;
      border-left: 1px dashed #e5e5e5;
      position: absolute;
      top: 90px;
      bottom: 0;
      left: 50%;
    }

    .seats-block .seat {
      display: inline-block;
      font-size: 0;
      width: 30px;
      height: 26px;
      margin: 0 5px;
      background: url()
        no-repeat;
      background-position: 0 1px;
    }

    .seats-block .seat.empty {
      background-image: none;
    }

    .seats-block .seat.sold {
      background-image: url();
    }

    .seats-block .seat.selected {
      background-image: url();
    }

    .seats-block .seat.lover {
      background-image: url();
      width: 35px;
    }

    .seats-block .seat.lover.selected {
      background-image: url();
    }

    .seats-block .seat.lover-left {
      background-position: 1px 0;
      margin-right: 0;
    }

    .seats-block .seat.lover-right {
      background-position: -34px 0;
      margin-left: 0;
    }
  }
}
</style>
